<!--水果店铺的订单的组价-->
<template>
  <div id="tablemap">
    <table class="orders" style="margin-bottom: 20px" v-for="(v,index) in list" :key="index">
      <tr class="orders-1">
        <th>
          <input type="checkbox" :checked="Is" @click="cheeckAll" />
        </th>
        <th>{{v.title}}</th>
        <th>{{v.standard}}</th>
        <th>{{v.prices}}</th>
        <th>{{v.numbers}}</th>
        <th>{{v.money}}</th>
        <th>{{v.operation}}</th>
      </tr>
      <tr class="orders-2" v-for="(vs,index) in v.one" :key="index">
        <td>
          <input type="checkbox" :checked="Is" />
        </td>
        <td>
          <img :src="vs.image" />
          <span>{{vs.title_1}}</span>
        </td>

        <td>{{vs.standard_1}}</td>
        <td>
          <span>￥</span>
          <span>{{vs.prices_1}}</span>
        </td>
        <td>
          <button
            @click="deCreament(v.id,vs.id,vs.num,vs.prices_1,vs.money_1)"
            class="btn"
          >{{vs.decreament}}</button>
          <span>{{vs.num}}</span>
          <button
            @click="inCreament(v.id,vs.id,vs.num,vs.prices_1,vs.money_1)"
            class="btn"
          >{{vs.increament}}</button>
        </td>

        <td>
          <span>￥</span>
          <span>{{vs.money_1}}</span>
        </td>
        <td @click="Del">{{vs.operation_1}}</td>
      </tr>
      <tr>
        <td colspan="7" class="orders-3">
          <span>商品金额</span>
          <span>{{v.moneys}}</span>
        </td>
      </tr>
    </table>
    <div class="carfooter">
        <div class="carfooterbtn">
            <span>全选</span>
            <strong>批量删除</strong>
        </div>
        <div class="carfooterall">
            <span>商品总计:</span>
            <strong>￥{{allmoney}}</strong>
            <router-link to="/shop/order">立即购买</router-link>
        </div>
    </div>
  </div>
</template>

<script>
import bus from "../main";

export default {
  name: "CarTable",
  //放数据的地方
  props: ["As"],
  data() {
    return {
      // num: 1,

      Is: false,
      allmoney: 0,
      list: [
        {
          id: 0,
          title: "爱果果水果店",
          standard: "规格",
          prices: "单价",
          numbers: "数量",
          money: "金额",
          operation: "操作",
          moneys: 0,
          one: [
            {
              id: 0,
              image: require("../assets/images/banner-13.png"),
              title_1: "云南蒙自石榴8个装",
              standard_1: "8个装",
              prices_1: 70,
              decreament: "-",
              num: 1,
              increament: "+",
              money_1: 70,
              operation_1: "删除"
            },
            {
              id: 1,
              image: require("../assets/images/banner-13.png"),
              title_1: "云南蒙自石榴8个装",
              standard_1: "8个装",
              prices_1: 100,
              decreament: "-",
              num: 1,
              increament: "+",
              money_1: 100,
              operation_1: "删除"
            }
          ]
        },
        {
          id: 1,
          title: "爱果果水果店",
          standard: "规格",
          prices: "单价",
          numbers: "数量",
          money: "金额",
          operation: "操作",
          moneys: 0,
          one: [
            {
              id: 0,
              image: require("../assets/images/banner-13.png"),
              title_1: "云南蒙自石榴8个装",
              standard_1: "8个装",
              prices_1: 70,
              decreament: "-",
              num: 1,
              increament: "+",
              money_1: 70,
              operation_1: "删除"
            },
            {
              id: 1,
              image: require("../assets/images/banner-13.png"),
              title_1: "云南蒙自石榴8个装",
              standard_1: "8个装",
              prices_1: 100,
              decreament: "-",
              num: 1,
              increament: "+",
              money_1: 100,
              operation_1: "删除"
            }
          ]
        }
      ]
    };
  },

  created() {
    // console.log(this.CheckA);
    for (const i of this.list) {
      window.console.log(i.moneys);
      for (const j of i.one) {
        i.moneys += Number(j.money_1);
      }
      this.allmoney += i.moneys;
    }
  },
  mounted() {
    // bus接受穿过来的值
    const _this = this;
    bus.$on("IS", function() {
      // console.log(val);
      // _this.Is = val;
      if (_this.Is == true) {
        _this.Is = false;
      } else if (_this.Is == false) {
        _this.Is = true;
      }
    });
  },
  //写方法的位置
  methods: {
    // bus接受穿过来的值

    //做加法
    inCreament(index, id, number, prices) {
     this.allmoney=0;
      this.list[index].one[id].num = number + 1;
      this.list[index].one[id].money_1 = number * prices + prices;

      //得出总金额
      for (const i of this.list) {
          i.moneys=0;
        
        for (const j of i.one) {
          i.moneys += j.money_1;
        }
        this.allmoney += i.moneys;
      }
    },
    //做减法
    deCreament(index, id, number, prices) {
     this.allmoney=0;
      
      if (number <= 1) {
        this.list[index].one[id].num = 1;
        this.list[index].one[id].money_1 = prices;
      } else {
        this.list[index].one[id].num = number - 1;
        this.list[index].one[id].money_1 = number * prices - prices;
        for (const i of this.list) {
             i.moneys=0;
          for (const j of i.one) {
            window.console.log(j.money_1);
            // console.log(this.moneys);
            i.moneys += j.money_1;
          }
          this.allmoney += i.moneys;
        }
      }
    },
    //删除
    Del() {
      window.console.log("删除");
    },
    handleChange(value) {
      window.console.log(value);
    },

    //    全选
    cheeckAll() {
      this.Is = !this.Is;
    }
  }
};
</script>

<style scoped>
#tablemap {
  width: 80%;
  margin: auto;
  margin-top:20px;
}
.orders {
  width: 100%;
  margin: auto;
  text-align: center;
  border: 1px solid #e9e9e9;
  border-bottom: none;
  border-spacing: 0px;
}
.orders tr td {
  border-bottom: 1px solid #e9e9e9;
}
.orders-1 {
  width: 100%;
  height: 30px;
  /*border: 1px solid red;*/
  background: #f2f2f2;
}

.orders-1 th {
  text-align: center;
  /*border: 1px solid red;*/
}

.orders-1 th:nth-of-type(1) {
  width: 4%;
}

.orders-1 th:nth-of-type(2) {
  width: 20%;
  text-align: left;
}

.orders-2 {
  width: 100%;
  height: 100px;
  border-bottom: 1px solid #e9e9e9;
}

.orders-2 td {
  /*border: 1px solid red;*/
}

.orders-2 td:nth-of-type(2) {
  width: 100%;
  height: 100px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.orders-2 td:nth-of-type(2) img {
  width: 60px;
  height: 60px;
  border: 1px solid #999;
  /*margin-right: 10px;*/
}

.orders-2 td:nth-of-type(2) span {
  padding: 10px;
  /*border: 1px solid red;*/
}
.btn {
  line-height: 25px;
}
.orders-2 td:nth-of-type(5) span {
  padding: 7px 20px 5px 20px;
  line-height: 25px;
  border: 1px solid #d3d3d3;
}

.orders-2 td:nth-of-type(5) button {
  font-size: 17px;
  font-weight: bold;
}

.orders-2 td:nth-of-type(7) {
  color: #3e8f3e;
}

.orders-3 {
  width: 66.66667%;
  height: 70px;
  margin: auto;
  text-align: right;
  line-height: 70px;
}

.orders-3 span:nth-of-type(1) {
  padding: 5px;
  font-size: 15px;
  /*border: 1px solid red;*/
}

.orders-3 span:nth-of-type(2) {
  padding: 10px 20px 10px 20px;
  color: red;
  font-size: 15px;
}

.el-input__inner .el-input-number {
  width: 60px;
  height: 40px;
  padding: 0px;
}
.carfooter{
    width:100%;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.carfooterbtn{
    width:15%;
    font-size: 16px;
    color:#498e3d;
    display: flex;
    justify-content: space-around;
}
.carfooterall{
    width:20%;
    font-size:20px;
    display: flex;
    justify-content: space-between;
}
.carfooterall strong{
    color:#ff8c8c;
}
.carfooterall a{
    display: inline-block;
    text-decoration: none;
    width:35%;
    line-height: 25px;
    color:#fff;
    background:#f08200;
    border: none;
}
</style>